<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>收货地址管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #3b82f6;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 通用地址页面样式 */
    .address-page {
      display: none;
    }
    
    .address-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 地址标签 */
    .address-tag {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      margin-right: 6px;
    }
    
    .tag-default {
      background-color: #e0f2fe;
      color: #0284c7;
    }
    
    .tag-home {
      background-color: #dbeafe;
      color: #3b82f6;
    }
    
    .tag-work {
      background-color: #dcfce7;
      color: #16a34a;
    }
    
    .tag-other {
      background-color: #f3f4f6;
      color: #6b7280;
    }
    
    /* 操作按钮 */
    .action-btn {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      background-color: #f5f7fa;
    }
    
    .action-btn.edit {
      color: #3b82f6;
    }
    
    .action-btn.delete {
      color: #ef4444;
    }
    
    .action-btn.set-default {
      color: #10b981;
    }
    
    /* 新建地址按钮 */
    .add-address-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      text-decoration: none;
      z-index: 90;
    }
    
    /* 样式1 - 卡片视图 */
    .card-view {
      padding: 15px;
    }
    
    .address-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      border: 1px solid #eee;
      position: relative;
    }
    
    .address-card.default::before {
      content: "默认地址";
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: #3b82f6;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    
    .address-header {
      margin-bottom: 10px;
    }
    
    .address-name {
      font-weight: 600;
      font-size: 16px;
      margin-right: 10px;
    }
    
    .address-phone {
      color: #666;
      font-size: 14px;
    }
    
    .address-detail {
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    
    .address-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid #f5f7fa;
      padding-top: 10px;
    }
    
    /* 样式2 - 列表视图 */
    .list-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .address-list-item {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #eee;
      position: relative;
    }
    
    .address-list-item.default::after {
      content: "默认";
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: #3b82f6;
      color: white;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 4px;
    }
    
    .list-item-content {
      margin-right: 60px;
    }
    
    .list-address-name {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 5px;
    }
    
    .list-address-detail {
      font-size: 13px;
      color: #666;
      line-height: 1.4;
      margin-bottom: 8px;
    }
    
    .list-address-tag {
      display: flex;
      gap: 5px;
    }
    
    .list-address-actions {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      display: flex;
      gap: 10px;
    }
    
    /* 样式3 - 简洁视图 */
    .simple-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .simple-address-item {
      background-color: white;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .simple-address-info {
      flex: 1;
      min-width: 0;
    }
    
    .simple-address-header {
      display: flex;
      align-items: center;
      margin-bottom: 3px;
    }
    
    .simple-address-name {
      font-weight: 500;
      font-size: 15px;
      margin-right: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .simple-address-phone {
      font-size: 13px;
      color: #999;
      white-space: nowrap;
    }
    
    .simple-address-detail {
      font-size: 13px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* 样式4 - 分组视图 */
    .group-view {
      margin-bottom: 15px;
    }
    
    .group-section {
      margin-bottom: 15px;
    }
    
    .group-header {
      padding: 10px 15px;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      background-color: #f5f7fa;
      display: flex;
      justify-content: space-between;
    }
    
    .group-count {
      background-color: #e5e7eb;
      color: #6b7280;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 10px;
    }
    
    .group-content {
      background-color: white;
    }
    
    .group-address-item {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .group-address-info {
      flex: 1;
    }
    
    .group-address-name {
      font-size: 14px;
      font-weight: 500;
      margin: 0 0 3px 0;
    }
    
    .group-address-detail {
      font-size: 12px;
      color: #666;
      line-height: 1.3;
    }
    
    .group-address-actions {
      display: flex;
      gap: 5px;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #cbd5e1;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
    }
    
    .empty-btn {
      padding: 8px 16px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 新建地址按钮 -->
  <a href="#" class="add-address-btn" id="addAddressBtn">
    <i class="fa fa-plus"></i>
  </a>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">收货地址管理</h1>
    <a href="#" class="nav-btn primary" id="searchBtn">
      <i class="fa fa-search"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="card">卡片视图</div>
      <div class="style-tab" data-style="list">列表视图</div>
      <div class="style-tab" data-style="simple">简洁视图</div>
      <div class="style-tab" data-style="group">分类视图</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部地址</div>
    <div class="filter-item">按标签</div>
    <div class="filter-item">最近添加</div>
  </div>
  
  <!-- 样式1 - 卡片视图 -->
  <div class="address-page active" id="card">
    <div class="card-view">
      <div class="address-card default">
        <div class="address-header">
          <span class="address-name">张先生</span>
          <span class="address-phone">138****5678</span>
        </div>
        <div class="address-detail">
          北京市朝阳区建国路88号 现代城5号楼2307室
          <div style="margin-top: 5px;">
            <span class="address-tag tag-home">家庭</span>
          </div>
        </div>
        <div class="address-footer">
          <button class="action-btn edit"><i class="fa fa-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="fa fa-trash"></i> 删除</button>
        </div>
      </div>
      
      <div class="address-card">
        <div class="address-header">
          <span class="address-name">张先生</span>
          <span class="address-phone">138****5678</span>
        </div>
        <div class="address-detail">
          上海市浦东新区张江高科技园区科苑路88号 创新大厦B座1503室
          <div style="margin-top: 5px;">
            <span class="address-tag tag-work">工作</span>
            <button class="action-btn set-default" style="font-size: 12px; padding: 2px 5px;">设为默认</button>
          </div>
        </div>
        <div class="address-footer">
          <button class="action-btn edit"><i class="fa fa-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="fa fa-trash"></i> 删除</button>
        </div>
      </div>
      
      <div class="address-card">
        <div class="address-header">
          <span class="address-name">张先生</span>
          <span class="address-phone">138****5678</span>
        </div>
        <div class="address-detail">
          广州市天河区珠江新城冼村路5号 高德置地广场A座1202室
          <div style="margin-top: 5px;">
            <span class="address-tag tag-other">其他</span>
            <button class="action-btn set-default" style="font-size: 12px; padding: 2px 5px;">设为默认</button>
          </div>
        </div>
        <div class="address-footer">
          <button class="action-btn edit"><i class="fa fa-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="fa fa-trash"></i> 删除</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 列表视图 -->
  <div class="address-page" id="list">
    <ul class="list-view">
      <li class="address-list-item default">
        <div class="list-item-content">
          <div class="list-address-name">张先生 138****5678</div>
          <div class="list-address-detail">北京市朝阳区建国路88号 现代城5号楼2307室</div>
          <div class="list-address-tag">
            <span class="address-tag tag-home">家庭</span>
          </div>
        </div>
        <div class="list-address-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
      
      <li class="address-list-item">
        <div class="list-item-content">
          <div class="list-address-name">张先生 138****5678</div>
          <div class="list-address-detail">上海市浦东新区张江高科技园区科苑路88号 创新大厦B座1503室</div>
          <div class="list-address-tag">
            <span class="address-tag tag-work">工作</span>
            <button class="action-btn set-default" style="font-size: 12px; padding: 2px 5px;">设为默认</button>
          </div>
        </div>
        <div class="list-address-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
      
      <li class="address-list-item">
        <div class="list-item-content">
          <div class="list-address-name">张先生 138****5678</div>
          <div class="list-address-detail">广州市天河区珠江新城冼村路5号 高德置地广场A座1202室</div>
          <div class="list-address-tag">
            <span class="address-tag tag-other">其他</span>
            <button class="action-btn set-default" style="font-size: 12px; padding: 2px 5px;">设为默认</button>
          </div>
        </div>
        <div class="list-address-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式3 - 简洁视图 -->
  <div class="address-page" id="simple">
    <ul class="simple-view">
      <li class="simple-address-item">
        <div class="simple-address-info">
          <div class="simple-address-header">
            <span class="simple-address-name">张先生</span>
            <span class="address-tag tag-home">家庭</span>
            <span style="color: #3b82f6; font-size: 12px; margin-left: 5px;">默认</span>
          </div>
          <div class="simple-address-detail">北京市朝阳区建国路88号 现代城5号楼2307室 | 138****5678</div>
        </div>
        <div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
      </li>
      
      <li class="simple-address-item">
        <div class="simple-address-info">
          <div class="simple-address-header">
            <span class="simple-address-name">张先生</span>
            <span class="address-tag tag-work">工作</span>
          </div>
          <div class="simple-address-detail">上海市浦东新区张江高科技园区科苑路88号 创新大厦B座1503室 | 138****5678</div>
        </div>
        <div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
      </li>
      
      <li class="simple-address-item">
        <div class="simple-address-info">
          <div class="simple-address-header">
            <span class="simple-address-name">张先生</span>
            <span class="address-tag tag-other">其他</span>
          </div>
          <div class="simple-address-detail">广州市天河区珠江新城冼村路5号 高德置地广场A座1202室 | 138****5678</div>
        </div>
        <div>
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式4 - 分组视图 -->
  <div class="address-page" id="group">
    <div class="group-view">
      <!-- 家庭地址分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>家庭地址</span>
          <span class="group-count">1</span>
        </div>
        <div class="group-content">
          <div class="group-address-item">
            <div class="group-address-info">
              <p class="group-address-name">张先生 <span style="color: #3b82f6; font-size: 12px;">默认</span></p>
              <div class="group-address-detail">
                北京市朝阳区建国路88号 现代城5号楼2307室<br>
                138****5678
              </div>
            </div>
            <div class="group-address-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn delete"><i class="fa fa-trash"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 工作地址分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>工作地址</span>
          <span class="group-count">1</span>
        </div>
        <div class="group-content">
          <div class="group-address-item">
            <div class="group-address-info">
              <p class="group-address-name">张先生</p>
              <div class="group-address-detail">
                上海市浦东新区张江高科技园区科苑路88号 创新大厦B座1503室<br>
                138****5678
              </div>
            </div>
            <div class="group-address-actions">
              <button class="action-btn set-default"><i class="fa fa-star-o"></i></button>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn delete"><i class="fa fa-trash"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 其他地址分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>其他地址</span>
          <span class="group-count">1</span>
        </div>
        <div class="group-content">
          <div class="group-address-item">
            <div class="group-address-info">
              <p class="group-address-name">张先生</p>
              <div class="group-address-detail">
                广州市天河区珠江新城冼村路5号 高德置地广场A座1202室<br>
                138****5678
              </div>
            </div>
            <div class="group-address-actions">
              <button class="action-btn set-default"><i class="fa fa-star-o"></i></button>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn delete"><i class="fa fa-trash"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-map-marker"></i>
    </div>
    <h3 class="empty-text">暂无收货地址</h3>
    <p class="empty-subtext">添加您的收货地址，方便商品配送</p>
    <button class="empty-btn">添加收货地址</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const addressPages = document.querySelectorAll('.address-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const actionBtns = document.querySelectorAll('.action-btn');
    const backBtn = document.getElementById('backBtn');
    const searchBtn = document.getElementById('searchBtn');
    const addAddressBtn = document.getElementById('addAddressBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        addressPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 操作按钮点击事件
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        let action;
        if (this.classList.contains('edit')) action = '编辑';
        else if (this.classList.contains('delete')) action = '删除';
        else if (this.classList.contains('set-default')) action = '设为默认';
        
        // 获取地址相关信息
        let addressInfo;
        if (this.closest('.address-card')) {
          addressInfo = this.closest('.address-card').querySelector('.address-detail').textContent.trim().split('\n')[0];
        } else if (this.closest('.address-list-item')) {
          addressInfo = this.closest('.address-list-item').querySelector('.list-address-detail').textContent;
        } else if (this.closest('.simple-address-item')) {
          addressInfo = this.closest('.simple-address-item').querySelector('.simple-address-detail').textContent.split('|')[0];
        } else if (this.closest('.group-address-item')) {
          addressInfo = this.closest('.group-address-item').querySelector('.group-address-detail').textContent.split('<br>')[0];
        }
        
        if (action === '删除') {
          if (confirm(`确定要删除地址 "${addressInfo.substring(0, 15)}..." 吗？`)) {
            showToast(`地址已${action}`);
          }
        } else {
          showToast(`${action}地址：${addressInfo.substring(0, 15)}...`);
        }
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function() {
      showToast('搜索地址');
    });
    
    // 新建地址按钮点击事件
    addAddressBtn.addEventListener('click', function() {
      showToast('添加新地址');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
